<template>
    <ul>
        <!-- 单个商品 -->
        <li>
            <div class="select">
                <input type="checkbox" :checked="good.checked" @click="good.checked=!good.checked">
            </div>
            <div class="photo">
                <img :src="good.s_good.s_goods_photos[0].path" alt="">
            </div>
            <div class="name">
                {{good.s_good.name}}
            </div>
            <div class="price">
                ￥ <span>{{(good.s_good.price).toFixed(2)}}</span>
            </div>
            <div class="number">
                <button :disabled="good.num<2" @click="putGoodNumcut(good.id)">-</button>
                <input type="text" v-model="good.num">
                <button :disabled="good.num>=good.s_good.stock_num" @click="putGoodNumadd(good.id)">+</button>
            </div>
            <div class="subtotal">
                ￥ <span>{{(good.num*good.s_good.price).toFixed(2)}}</span>
            </div>
            <div class="del">
                <button @click="delOneData(good.id)">删除</button>
            </div>
        </li>
    </ul>

</template>

<script>
import { delCart, putCart } from "@/assets/request.js"
export default {
    name: "ShopCart",
    props: ["good"],
    methods: {
        // 删除每一项
        async delOneData(id) {
            // 发请求
            let delGood = await delCart(id)
            // console.log(delGood);
            this.$emit("delOneData")
        },
        // 更新每一个商品的数量
        // 减少
        async putGoodNumcut(id) {
            this.good.num --;
            let putGoodcut = await putCart(id, {
                num: this.good.num
            })
            // console.log(putGoodcut);
        },
        // 增加
        async putGoodNumadd(id) {
            this.good.num += 1;
            let putGoodadd = await putCart(id,{
                num:this.good.num
            })
        }
    }

}

</script>

<style lang='scss' scoped>
@function vw($w) {
    @return ($w/1349) * 100+vw;
}

ul {
    width: vw(1200);
    background-color: #fff;
    margin: 0 auto;

    li {
        height: vw(100);
        text-align: center;
        display: flex;
        justify-content: space-between;
        align-items: center;
        box-sizing: border-box;
        margin: vw(20) 0;

        .select {
            margin-left: vw(30);

            input {
                width: vw(20);
                height: vw(20);
                cursor: pointer;
            }
        }

        .photo {
            img {
                width: vw(90);
                height: vw(90);
            }
        }

        .name {
            width: vw(300);
            font-size: vw(14);
        }

        .price {
            width: vw(90);
            font-size: vw(16);
        }

        .number {
            width: vw(100);
            input {
                width: vw(50);
                font-size: vw(16);
                text-align: center;
                border: none;
            }

            button {
                width: vw(22);
                height: vw(22);
                // background-color: #fff;
                cursor: pointer;
            }
        }

        .subtotal {
            width: vw(110);
            font-size: vw(18);
            color: red;
        }

        .del {
            margin-right: vw(60);
            font-size: vw(20);

            button {
                width: vw(90);
                height: vw(35);
                font-size: vw(16);
                cursor: pointer;

                &:hover {
                    color: #fff;
                    background-color: red;
                }

                border: none;
            }
        }
    }

}
</style>
